<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>志愿服务队添加页面</title>
  <link rel="stylesheet" href="../../../yl/index.css" />
  <!-- 布局样式 -->
  <link rel="stylesheet" href="../../../yl/style.css" />
  <link rel="stylesheet" href="../../../style/wangeditor.css">
  <link rel="stylesheet" href="../../../yl/mobile.css" />
  <link rel="stylesheet" href="../../../yl/easyui.css" />
  <link rel="stylesheet" href="../../../yl/icon.css" />
  <style>
    .select-li:hover {
      background-color: #f5f7fa;
    }

    #ChildTable .el-descriptions__label {
      width: 40px;
    }

    .el-select__wrapper.is-disabled .el-select__selected-item {
      color: #606266;
    }
  </style>
</head>

<body>
  <!-- <div id="app"> -->
  <div class="easyui-navpanel" id="app" v-cloak>
    <header>
      <div class="m-toolbar">
        <div class="m-title">{{action=='Add'?'添加志愿服务队信息':action=='Modify'?'修改志愿服务队信息':''}}</div>
      </div>
    </header>
    <div class="easyui-navpanel panel-body panel-body-nobottom panel-body-noborder" style="height: 3000px"
      id="MainTable" ref="MainTable"
      :data-options="JSON.stringify({ 'TableName': 'volunteer_teams', 'form': 'dataForm' ,'primary_key':'Volunteer_Team_SerialNumber' })">
      <div class="yl-main">
        <div class="table_titel">
          <div class="titel">志愿服务队信息</div>
        </div>
        <el-form :model="dataForm" ref="form" :inline-message="true" style="width: 100%">
          <el-descriptions :column="1" size="large" border>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">志愿服务队</div>
              </template>
              <el-form-item :rules="[{ required: true, message: '请输入志愿服务队名称', trigger: 'blur' }]"
                prop="Volunteer_Team_Name">
                <el-input v-model="dataForm.Volunteer_Team_Name" class="borderless-input" placeholder="请输入志愿服务队名称" />
              </el-form-item>
            </el-descriptions-item>
            <!-- <el-descriptions-item>
              <template #label>
                <div class="cell-item">志愿服务品牌</div>
              </template>
              <el-form-item :rules="[{ required: true, message: '请选择志愿服务品牌', trigger: 'change' }]"
                prop="Volunteer_Team_Category_SerialNumber">
                <el-select clearable v-model.trim="dataForm.Volunteer_Team_Category_SerialNumber"
                  placeholder="请选择志愿服务品牌" filterable style="width: 100%">
                  <el-option v-for="(item,index) in category" :key="index" :label="item.Volunteer_Team_Category"
                    :value="item.Volunteer_Team_Category_SerialNumber"></el-option>
                </el-select>
              </el-form-item>
            </el-descriptions-item> -->
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">志愿服务品牌</div>
              </template>
              <el-form-item :rules="[{ required: true, message: '请输入志愿服务品牌', trigger: 'blur' }]"
                prop="Volunteer_Team_Category">
                <el-input v-model="dataForm.Volunteer_Team_Category" class="borderless-input" placeholder="请输入志愿服务品牌" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">品牌项目内容</div>
              </template>
              <el-form-item :rules="[{ required: true, message: '请输入品牌项目内容', trigger: 'blur' }]"
                prop="Volunteer_Team_Category_Content">
                <el-input type="textarea" :autosize="{ minRows: 2}"  v-model="dataForm.Volunteer_Team_Category_Content" class="borderless-input" placeholder="请输入品牌项目内容" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">队伍简介</div>
              </template>
              <el-form-item :rules="[{ required: true, message: '请输入队伍简介', trigger: 'blur' }]" prop="Introduce">
                <el-input type="textarea" :autosize="{ minRows: 2}" v-model="dataForm.Introduce"
                  class="borderless-input" placeholder="请输入队伍简介" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">成立日期</div>
              </template>
              <el-form-item prop="Establishment_Date"
                :rules="[{ required: true, message: '请选择成立日期', trigger: 'change' }]">
                <el-date-picker v-model="dataForm.Establishment_Date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                  class="borderless-input" type="date" placeholder="请选择成立日期" size="large" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">活动次数</div>
              </template>
              <el-form-item :rules="[{ required: true, message: '请输入活动次数', trigger: 'blur' }]" prop="Activitie_Numbers">
                <el-input v-model="dataForm.Activitie_Numbers" class="borderless-input" placeholder="请输入活动次数" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">成员人数</div>
              </template>
              <el-form-item :rules="[{ required: true, message: '请输入成员人数', trigger: 'blur' }]" prop="Member_Numbers">
                <el-input v-model="dataForm.Member_Numbers" class="borderless-input" placeholder="请输入成员人数" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">牵头单位</div>
              </template>
              <el-form-item :rules="[{ required: true, message: '请输入牵头单位', trigger: 'change' }]" prop="Lead_Unit">
                <yl-cascader v-model="dataForm.Lead_Unit" filterable
                  :props="{value:'Government_Agencies_SerialNumber',label:'Agensies_Name',children:'children',checkStrictly: true}"
                  placeholder="请选择牵头单位" :options="Manager" style="width: 100%"></yl-cascader>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">主要职能</div>
              </template>
              <el-form-item :rules="[{ required: true, message: '请输入主要职能', trigger: 'blur' }]" prop="Responsibilities">
                <el-input v-model="dataForm.Responsibilities" class="borderless-input" placeholder="请输入主要职能" />
              </el-form-item>
            </el-descriptions-item>
            <!-- <el-descriptions-item>
              <template #label>
                <div class="cell-item">责任单位</div>
              </template>
              <el-form-item :rules="[{ required: true, message: '请选择责任单位', trigger: 'change' }]"
                prop="Lead_Unit">
                <el-cascader @change="handleChange" v-model="value" placeholder="请选择责任单位" :options="government_agencies"  class="borderless-input" style="width: 100%;"
                  :props="{ value:'Government_Agencies_SerialNumber', label:'Agensies_Name' ,checkStrictly: true,multiple: true }"></el-cascader>
              </el-form-item>
            </el-descriptions-item> -->
            <!-- <el-descriptions-item>
              <template #label>
                <div class="cell-item">驻村行政区</div>
              </template>
              <el-form-item :rules="[{ required: true, message: '请选择驻村行政区', trigger: 'change' }]" prop="Village_Number">
                <el-select clearable v-model.trim="dataForm.Village_Number" placeholder="请选择驻村行政区" filterable
                  style="width: 100%">
                  <el-option v-for="(item,index) in village" :key="index" :label="item.Village"
                    :value="item.VillageNumber"></el-option>
                </el-select>
              </el-form-item>
            </el-descriptions-item> -->
            <!-- <el-descriptions-item>
              <template #label>
                <div class="cell-item">所属党组织</div>
              </template>
              <el-form-item :rules="[{ required: true, message: '请选择所属党组织', trigger: 'change' }]" prop="Party_Organization_SerialNumber">
                <el-select clearable v-model.trim="dataForm.Party_Organization_SerialNumber" placeholder="请选择所属党组织" filterable
                  style="width: 100%">
                  <el-option v-for="(item,index) in organization" :key="index" :label="item.Party_Organization_Name"
                    :value="item.Party_Organization_SerialNumber"></el-option>
                </el-select>
              </el-form-item>
            </el-descriptions-item> -->
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">队长</div>
              </template>
              <el-form-item prop="Captain_Number" :rules="[{ required: true, message: '请选择队长', trigger: 'change' }]">
                <div style="display: flex; align-items: center;">
                  <!-- <el-select @change="changePersonal($event,dataForm)" clearable v-model.trim="dataForm.Captain_Number"
                    placeholder="请选择负责人" filterable style="width: 100%">
                    <el-option v-for="(item,index) in personal_information" :key="index" :label="item.Personal_Name"
                      :value="item.ID_Card_Number"></el-option>
                  </el-select> -->
                  <yl-select @change="changePersonal($event,dataForm)" v-model="dataForm.Captain_Number" clearable filterable placeholder="请选择队长" 
                    :options="personal_information" :props="{value:'ID_Card_Number',label:'Personal_Name'}">
                    <el-table-column prop="ID_Card_Number" width="180" show-overflow-tooltip label="身份证号"></el-table-column>
                    <el-table-column prop="Personal_Name" show-overflow-tooltip label="姓名"></el-table-column>
                    <el-table-column prop="Birthday" show-overflow-tooltip label="出生日期"></el-table-column>
                    <el-table-column prop="Gender" label="性别"></el-table-column>
                    <el-table-column prop="Nation" label="民族"></el-table-column>
                    <el-table-column prop="Registered_Residence" show-overflow-tooltip label="籍贯"></el-table-column>
                    <el-table-column prop="Contact_Phone" label="联系方式"></el-table-column>
                  </yl-select>
                  <el-button type="primary" size="small" @click="handleSkip">添加人员</el-button>
                </div>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">联系电话</div>
              </template>
              <el-form-item prop="Mobile" :rules="[{ required: true, validator:PH_Validity, trigger: 'blur' }]">
                <el-input v-model="dataForm.Mobile" class="borderless-input" placeholder="请输入联系电话" />
              </el-form-item>
            </el-descriptions-item>
          </el-descriptions>
        </el-form>
        <div id="ChildTable">
          <div class="table_titel">
            <div class="titel">责任单位</div>
            <div class="operation">
              <el-button type="primary" size="small" @click="showDialog=true">选择责任单位</el-button>
            </div>
          </div>
          <el-form :model="{childDataForm}" ref="form1" :inline-message="true" style="width: 100%">
            <el-descriptions
              :data-options="JSON.stringify({ 'TableName': 'volunteer_teams_responsibility_unit', 'form': 'childDataForm', 'ParentTableName': 'volunteer_teams'})"
              :column="5" size="large" border>
              <el-descriptions-item v-for="(item,index) in childDataForm.filter(item => item.Row_Status != '1')"
                :key="index">
                <template #label>
                  <div class="cell-item">{{index+1}}</div>
                </template>
                <el-form-item :prop="'childDataForm.'+index+'.Responsibility_Unit'"
                  :rules="[{ required: true, message: '请选择责任单位', trigger: 'change' }]">
                  <el-select disabled clearable v-model.trim="item.Responsibility_Unit" placeholder="责任单位" filterable
                    style="width: 100%">
                    <el-option v-for="(item,index) in government_agencies" :key="index" :label="item.Agensies_Name"
                      :value="item.Government_Agencies_SerialNumber"></el-option>
                  </el-select>
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
          </el-form>
          <!-- <div class="table_titel">
            <div class="titel">团队成员</div>
            <div class="operation">
              <el-button type="primary" size="small" @click="handleAdd('childDataForm')">新增</el-button>
              <el-button type="danger" size="small" @click="handleRemove('childDataForm')">删除</el-button>
            </div>
          </div>
          <el-form :model="{childDataForm}" ref="form1" inline-message="true" style="width: 100%">
            <el-descriptions
              :data-options="JSON.stringify({ 'TableName': 'volunteer_teams_members', 'form': 'childDataForm', 'ParentTableName': 'volunteer_teams'})"
              :column="3" size="large" border v-for="(item,index) in childDataForm.filter(item => item.Row_Status != '1')"
              :key="index">
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">团队成员</div>
                </template>
                <el-form-item :prop="'childDataForm.'+index+'.ID_Card_Number'"
                  :rules="[{ required: true, message: '请选择成员', trigger: 'change' }]">
                  <el-select clearable @change="changePersonal($event,item)" v-model.trim="item.ID_Card_Number" placeholder="请选择成员" filterable
                    style="width: 100%">
                    <el-option v-for="(item,index) in personal_information" :key="index" :label="item.Personal_Name"
                      :value="item.ID_Card_Number"></el-option>
                  </el-select>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">负责人</div>
                </template>
                <el-form-item :prop="'childDataForm.'+index+'.Is_Captain'"
                  :rules="[{ required: true, message: '是否为负责人', trigger: 'change' }]">
                  <el-select clearable v-model.trim="item.Is_Captain" placeholder="是否为负责人" filterable style="width: 100%">
                    <el-option v-for="(item,index) in [{label:'普通成员',value:'0'},{label:'负责人',value:'1'}]" :key="index"
                      :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">职务</div>
                </template>
                <el-form-item :prop="'childDataForm.'+index+'.Volunteer_Position_SerialNumber'"
                  :rules="[{ required: true, message: '请选择职务', trigger: 'change' }]">
                  <el-select clearable v-model.trim="item.Volunteer_Position_SerialNumber" placeholder="请选择职务" filterable
                    style="width: 100%">
                    <el-option v-for="(item,index) in position" :key="index" :label="item.Volunteer_Position"
                      :value="item.Volunteer_Position_SerialNumber"></el-option>
                  </el-select>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">联系电话</div>
                </template>
                <el-form-item :prop="'childDataForm.'+index+'.Mobile'"
                  :rules="[{ required: true, validator:PH_Validity, trigger: 'blur' }]">
                  <el-input v-model="item.Mobile" class="borderless-input" placeholder="请输入联系电话" />
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
          </el-form> -->
        </div>
        <el-dialog v-model="showDialog" width="550" class="custom-dialog" v-cloak>
          <template #header>
            <div class="dialog-header">
              <span>请选择责任单位</span>
            </div>
          </template>
          <div style="border: 1px solid #f5f5f5; height: 500px; display: flex;">
            <div
              style="padding: 10px 12px 0 8px; width: 280px; height: 100%; border-right: 1px solid #f5f5f5; flex-shrink: 0;">
              <el-input @input="query" placeholder="搜索责任单位" v-model="value" prefix-icon="Search" clearable></el-input>
              <div v-if="!isQuery" style="height: 420px; margin-top: 20px; overflow-y: auto;">
                <el-tree default-expand-all :expand-on-click-node="false" :data="treeData" @node-click="handleNodeClick"
                  :props="{ label: 'Agensies_Name' }">
                  <template #default="{ node, data }">
                    <div class="custom-tree-node" :style="{cursor: !data.disabled?'pointer':'not-allowed'}">
                      <el-tooltip class="item" effect="dark" :content="node.label" placement="left">
                        <span
                          :style="{color: childDataForm.filter(item => item.Row_Status != '1').some(i=>i.Responsibility_Unit==data.Government_Agencies_SerialNumber)?'#409EFF':''}">{{
                          node.label }}</span>
                      </el-tooltip>
                    </div>
                  </template>
                </el-tree>
              </div>
              <div v-else style="padding: 20px 0;">
                <div class="el-tree__empty-block" v-if="tableData.length == 0"><span
                    class="el-tree__empty-text">暂无数据</span></div>
                <ul v-else style="overflow-y: auto; height: 420px; width: 100%; margin-left: 20px;">
                  <li @click="handleNodeClick(item)" v-for="(item,index) in tableData" class="select-li" :key="index"
                    style="height: 26px; display: flex; align-items: center;
                    justify-content: space-between; cursor: pointer;overflow: hidden;">
                    <span class="el-tooltip__trigger"
                      :style="{color: childDataForm.filter(item => item.Row_Status != '1').some(i=>i.Responsibility_Unit==item.Government_Agencies_SerialNumber)?'#409EFF':''}"
                      style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width:220px">
                      <el-tooltip class="item" effect="dark" :content="item.Agensies_Name" placement="left">
                        {{item.Agensies_Name}}
                      </el-tooltip>
                    </span>
                  </li>
                </ul>
              </div>
            </div>
            <div style="width: 100%;display: flex; flex-direction: column;">
              <div style="height: 42px; width: 100%; border-bottom:1px solid #f5f5f5; padding: 0 10px; font-size: 12px;
                display: flex; justify-content: space-between; align-items: center;flex-shrink: 0;">
                <span>已选（{{childDataForm.length}}）</span>
                <span style="cursor: pointer;color: #409EFF;" @click="clear">清空</span>
              </div>
              <div style="padding: 20px 10px 20px 20px;">
                <ul style="overflow-y: auto; height: 420px; width: 100%;">
                  <li @click="remove(item,index)"
                    v-for="(item,index) in childDataForm.filter(item => item.Row_Status != '1')" class="select-li"
                    :key="index" style="height: 26px; display: flex; align-items: center;
                    justify-content: space-between; cursor: pointer;overflow: hidden;">
                    <span class="el-tooltip__trigger"
                      style="color: #409EFF;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width:175px">
                      <el-tooltip class="item" effect="dark" :content="Agensies_Name(item.Responsibility_Unit)"
                        placement="left">
                        {{Agensies_Name(item.Responsibility_Unit)}}
                      </el-tooltip>
                    </span>
                    <el-icon>
                      <Close />
                    </el-icon>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="showDialog = false" class="cancel-btn">取消</el-button>
              <!-- <el-button type="primary" @click="saveFields" class="confirm-btn">保存</el-button> -->
            </div>
          </template>
        </el-dialog>
      </div>
    </div>
    <footer class="botton-ann">
      <el-button @click="goBack">返回</el-button>
      <el-button type="primary" :loading="loading" plain @click="handleSubmit">提交</el-button>
    </footer>
  </div>
</body>
<script src="../../../utils/utils.js"></script>
<script src="../../../config/config.js"></script>
<script src="../../../utils/ID_Validity.js"></script>
<script src="../../../utils/compressor.js"></script>
<script src="../../../utils/wangeditor.js"></script>
<script src="../../../utils/mixins.js"></script>
<script src="../../../yl/vue.js"></script>
<script src="../../../yl/index.js"></script>
<script src="../../../yl/zh-cn.mjs"></script>
<script src="../../../yl/index.iife.min.js"></script>
<script src="../../../yl/jquery.min.js"></script>
<script src="../../../utils/jquery.cookie.js"></script>
<script src="../../../yl/jquery.easyui.min.js"></script>
<script src="../../../yl/jquery.easyui.mobile.js"></script>
<script src="../../../yl/moment.min.js"></script>
<script src="../../../api/request.js"></script>
<script src="./js/add.js"></script>

</html>